<template>
  <view class="user px-[24rpx] py-0">
    <custom-navbar title="求职活动" :autoBack="true" leftIconColor="#303133" />
    <MySwiper :swiper-img="swiperImg" swiper-height="260rpx" />
    <Tabbar :tab-list="tabList" @tabChange="getTabChangeValue" />
    <div class="box bg-#fff">
      <div v-for="item in list"
        class="break-inside-avoid mb-14rpx shadow-[0px_3px_8px_0px_rgba(191,191,191,0.26)] rounded-[16rpx]">
        <image class="w-100%  block" :src="item.img" alt="" />
        <view class="px-10rpx py-10rpx" v-if="item.title">
          <view class="text-[#1d2129] text-[26rpx]">{{ item.title }}</view>
          <view class="text-[#666] text-[20rpx]">{{ item.area }}</view>
          <view class="text-[#666] text-[20rpx]">{{ item.date }}-{{item.type}}</view>
          <view
            class="w-[58px] h-40rpx rounded-[20px] flex items-center justify-center bg-#47b89a text-[#fff] text-[20rpx]">
            <view class="iconfont icon-baoming text-[#fff] text-[20rpx]"></view>
            <view>已报名</view>
          </view>
        </view>
      </div>
    </div>
    <up-gap height="200rpx" />
  </view>
</template>

<script setup lang="ts">
  import MySwiper from '@/pages/components/myswiper/index.vue';
  import Tabbar from '@/pages/components/tabbar/index.vue';
  // import user14 from '@/static/images/tab/user-14.png';
  // import active01 from '@/static/images/tab/active-01.png';

  import { userActivityList, userBanner } from '@/api/user';
const user14 = 'https://yiliao.test03.qcw800.com/static/images/tab/user-14.png';
  const active01 = 'https://yiliao.test03.qcw800.com/static/images/tab/active-01.png';

  const tabList = reactive([
    { name: '未开始', activeLineWidth: '108' },
    { name: '报名中', activeLineWidth: '108' },
    { name: '已结束', activeLineWidth: '108' },
  ]);

  let list : any = ref([])
  const to = (params) => {
    uni.navigateTo({
      url: params.url,
    });
  };

  const res : any = reactive([]);
  async function getActivityList(type : number) {
    let result = await userActivityList({ type: type });
    console.log('求职活动列表 res list:::', result);
    //vue3传递result的值到子组件JobList中的属性jobList中
    for (let i = 0; i < result.list.length; i++) {
      const r = result.list[i]
      let rr = {
        activity_id: r.id,
        activity_img: r.image,
        name: r.name,
        province: r.province.name,
        city: r.city.name,
        start_time: r.start_time,
        is_join: r.is_join
      }
      if (i == 0) {
        list.value.push({
          img: rr.activity_img,
          type: 3,
        })
      } else {
        list.value.push({
          title: rr.name,
          area: rr.province + "" + rr.city,
          img: rr.activity_img,
          date: rr.start_time,
          type: rr.is_join == 1 ? 1 : type == 1 ? 0 : type == 2 ? 1 : 2
        })
        console.log('type的值：：：', rr.is_join == 1 ? 1 : type == 1 ? 0 : type == 2 ? 1 : 2)
      }
    }
  }

  const handleTabClick = (index : number) => {
    console.log('点击了tabbar的第' + index + '个');
  }

  const swiperImg : any = reactive([]);
  async function getBanner(type : number) { //1首页
    let result = await userBanner({
      type: type
    });
    console.log('banner结果:::', result)
    for (let i = 0; i < result.length; i++) {
      const r = result[i]
      swiperImg.push(r.image)
    }
  }

  const getTabChangeValue = (value) => {
    console.log('change事件传递过来的参数', value)
    list.value = []
    getActivityList(value.index + 1);
  }

  onLoad(() => {
    getActivityList(1);
    getBanner(3);
  });
</script>
<style>
  .box {
    padding: 10px;
    column-count: 2;
    column-gap: 20px;
  }

  .item {
    border: 1px solid #999;
    margin-bottom: 10px;
    break-inside: avoid;
  }

  .item img {
    width: 100%;
  }
</style>
